<template>
	<m-layout title="收货地址" gap="25">
		<m-block class="from" radius="20" gap="0 24">
			<m-input border="0" placeholder="请填写手机号码" v-model="userphone">
				<view class="item_title" slot="left">
					<text class="from_text1">手机号码</text>
				</view>
			</m-input>
			<m-input placeholder="请填写联系人" v-model="username">
				<view class="item_title" slot="left">
					<text class="from_text1">收货人</text>
				</view>
			</m-input>

			<!-- <view class="" @click="getAddress">
				<m-input placeholder="请选择所在地区" type="textarea" v-model="are" disabled >
					<view class="item_title" slot="left">
						<text class="from_text1">所在地区</text>
					</view>
					<m-icon slot="right" type="icon-dingwei" wh="38" color="#333"></m-icon>
				</m-input>
			</view> -->





			<view class="pick-regions flex-between">
				<view class="left flex-between" style="padding: 0;">
					<view class="item_title">
						<text class="from_text1">所在地区</text>
					</view>
					<view class="flex-1 content-1">
						<pick-regions :defaultRegion="are" @getRegion="handleGetRegion">
							<!-- <input type="text" v-model="info.province + info.city + info.county || ''" placeholder="省市区县、乡镇"
								placeholder-class="from-item-pcs" /> -->
							<template v-if="are.length >0 ">
								<view class="input_text">{{ are.join(' ') }}</view>
							</template>
							<template v-else>
								<m-text color="#999">请选择省市区县、乡镇</m-text>
							</template>
							
						</pick-regions>
					</view>
					<!-- <m-icon type="icon-dingwei" wh="38" color="#333"></m-icon> -->
				</view>
			</view>
			<view class="pick-regions flex-between">
				<view class="left flex-between">
					<view class="item_title">
						<text class="from_text1">详细地址</text>
					</view>
					<textarea class="textarea" v-model="useraddress" auto-height placeholder="请填入详细地址"
						placeholder-class="placeholder"></textarea>
				</view>
			</view>
		</m-block>
		<m-block class="from2" radius="20" spa="16 0" gap="24">
			<view class="from2-item flex-between">
				<view class="item_title">
					<text class="from_text1">标签</text>
				</view>
				<view class="tag-view flex">
					<view class="label flex-center" :class="tag == item ? 'active' : ''" @click="tag = item"
						v-for="(item,idx) in tagList" :key="idx">
						<text>{{item}}</text>
						<template v-if="tag == item">
							<m-icon @click="Delete(item,idx)" class="m-icon" wh="30" spa="0 0  0 15" color="#fff"
								type="icon-guanbi"></m-icon>
						</template>
					</view>
					<view class="label flex-center" @click.stop="setNameShow = true">
						<m-icon wh="30" spa="0 0 5 0" type="icon-jiahao" color="#26500c"></m-icon>
					</view>
				</view>
			</view>
			<view class="from2-item flex-between">
				<view>
					<view class="from_text1">设置默认地址</view>
					<view class="from_text2" style="margin-top: 9rpx;">提示：下单会优先使用该地址</view>
				</view>
				<switch :checked="isdefualt == 1" color="var(--theme)" @change="switchChange"
					style="transform: scale(0.8);" />
			</view>
		</m-block>
		<m-block class="footer" bgColor="unset" spa='100 0 0'>
			<m-button block type="theme" @click="submit" :loading='isLoading'>
				确认
			</m-button>
		</m-block>
		<!-- 删除弹窗 -->
		<m-dialog v-model="isShow" :showCancel="true" cancelText="取消" confirmText="确定" @handleCancel="isShow = false"
			@handleConfirm="dialogConfirm">
			<view class="pop_txt">确定要删除该地址吗？</view>
		</m-dialog>


		<m-dialog title="请输入标签" :showCancel="true" v-model="setNameShow" @handleCancel="setNameShow = false"
			@handleConfirm="setName">
			<view class="setName-box">
				<view class="form-Item">
					<input type="text" v-model="names" placeholder="请输入新的标签">
				</view>
				<view class="hint">
					<text>标签长度不超过3个字符</text>
				</view>
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { isEmpty } from '@/libs/fn/verify.js'
	import { mobile, object } from '@/libs/fn/verify.js' // 引入验证工具库
	import { mapState } from 'vuex'
	import { getCaption, getProvinces } from "@/utils/tools.js" // 引入工具库
	import { turnAdrr } from '@/api/Ctrls.js'
	import { AddEditAddress } from '@/api/Users.js'
	export default {
		data() {
			return {
				isLoading: false,
				names: '',
				setNameShow: false,


				id: 0,
				isdefualt: 0,

				tagList: this.Cookie.get('addressTag', ['家', '公司']),
				tag: "",

				areid: 0,
				useraddress: "",
				are: [],
				userphone: '',
				username: '',

				isShow: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				addressObj: state => state.address.addressObj,
			})
		},
		onLoad({ id }) {

			console.log(this.are)

			this.id = id;
			if (id) {
				const arr = this.addressObj[id];
				for (let item in arr) {
					this.$nextTick(() => {
						this[item] = arr[item];
						if (item == 'are') {
							if (!Array.isArray(arr['are'])) {
								this.are = arr['are'].split(' ')
							}
						}
					})
				}
			}
		},
		onShow() {},
		methods: {

			async getAddress() {
				// let that = this;
				// const { address, are } = await this.chooseLocation()
				// if (success) {
				// 	this.useraddress = address;
				// 	this.are = are;
				// }




				// uni.chooseLocation({
				// 	success: async (res) => {
				// 		console.log('位置名称：' + JSON.stringify(res));
				// 		const { addressComponent, formatted_address } = await turnAdrr(res.longitude, res
				// 			.latitude);
				// 		console.log(addressComponent)
				// 		const { province, district, city } = addressComponent
				// 		that.are = province + ' ' + city + ' ' + district;
				// 		that.useraddress = formatted_address
				// 	},
				// 	fail(e) {
				// 		console.log(e)
				// 	}
				// });
				// uni.openLocation({
				// 	latitude: latitude,
				// 	longitude: longitude,
				// 	success: function (res) {
				// 		console.log('success');
				// 	}
				// });
			},
			Delete(idx) {
				this.tagList.splice(idx, 1)
				this.Cookie.set('addressTag', this.tagList)
			},
			setName() {
				if (!this.names) {
					return this.Toast('请输入标签')
				}
				if (this.names.length > 3) {
					return this.Toast('标签长度不超过三个字')
				}
				this.tagList.push(this.names)
				this.tag = this.names;
				this.setNameShow = false;
				this.names = '';
				this.Cookie.set('addressTag', this.tagList)
			},
			// 设置默认地址监听
			switchChange(e) {
				this.isdefualt = e.detail.value ? 1 : 0;
			},
			// 省市区三级联动选择的地区
			handleGetRegion(region) {
				this.are = region.map(item => {
					return item.label
				}, []);
			},
			// 确认删除地址
			dialogConfirm() {
				this.isShow = false;
				this.DeleteDeliveryAddress();
			},
			// 确认
			async submit() {

				console.log("手机号", this.userphone)
				if (!mobile(this.userphone)) { // 是否手机
					return this.Toast('请输入正确的手机号');
				}
				if (!this.useraddress || !this.username || !this.are) {
					return this.Toast('请正确填写收货地址');
				}
				this.isLoading = true;
				const { success, msg } = await AddEditAddress({
					id: this.id,
					"isdefualt": this.isdefualt,
					"userid": this.userinfo.userid,
					"tag": this.tag,
					"areid": 1,
					"useraddress": this.useraddress,
					"are": this.are.join(' '),
					"userphone": this.userphone,
					"username": this.username
				})
				this.isLoading = false;
				this.Toast(msg);
				if (success) {
					await this.sleep(1000)
					this.Jump()
				}


			},
			// 删除收货地址
			async DeleteDeliveryAddress() {
				const success = await DeleteDeliveryAddress({
					addressID: this.info.addressID
				});
			},
		}
	}
</script>

<style lang="scss">
	picker {
		padding: 24rpx 0;
	}

	.from {
		.m-input {
			background: unset !important;
			border: unset !important;
			border-bottom: 1rpx solid #E7E7E7 !important;
			border-radius: 0 !important;
			padding: 24rpx 0 !important;
		}

		.from-item {
			margin: 0;
		}

		.item_title {
			width: 150rpx;
		}

		.from_text1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #141418;
		}

		.pick-regions {

			border-bottom: 2rpx solid var(--border);
			align-items: center;

			.left {
				padding: 24rpx 0;
				flex: 1;
				align-items: center;

				.uni-picker {
					flex: 1;
					font-size: var(--fs_28);
					color: var(--text);
					font-family: PingFang SC;
					font-weight: 400;
				}

				.textarea {
					padding-top: 8rpx;
					width: unset;
					flex: 1 !important;
					font-size: var(--fs_30);
					color: var(--text);
					font-family: PingFang SC;
					font-weight: 400;

				}

				.placeholder {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.contente-1 {}
		}

		.from-item-pcs {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #888888;
		}



		.input_text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.from_text2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #888888;
		}

		.label {
			background: #FFFFFF;
			border-radius: 60rpx;
			border: 1rpx solid #DDDDDD;
			text-align: center;
			color: #888888;
			padding: 4rpx 35rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
		}


	}

	.from2 {
		.from2-item {
			.item_title {
				width: 150rpx;
			}

			.from_text1 {
				font-size: 28rpx;
				font-weight: bold;
				color: #141418;
			}

			.from_text2 {
				font-size: 28rpx;
				font-weight: 400;
				color: #888888;
			}
		}

		.from2-item:nth-of-type(1) {
			padding-bottom: 24rpx;
			margin-bottom: 24rpx;
			border-bottom: 2rpx solid var(--border);
		}

		.tag-view {
			flex: 1;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 10rpx;

			.label {
				position: relative;
				margin-right: 15rpx;
				height: 44rpx;
				background: #FFFFFF;
				border: 1px solid #999999;
				border-radius: 22rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.m-icon {
					position: absolute;
					right: 5rpx;
				}
			}

			.active {
				border: 1rpx solid #5499F8;
				background: #5499F8;

				text {
					color: #FFF;
				}
			}
		}
	}

	.pop_txt {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		text-align: center;
		margin-top: 48rpx;
		margin-bottom: 66rpx;
	}

	.setName-box {
		padding: 24rpx;

		.form-Item {
			background: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
				background: #f6f6f6;
			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}
</style>